<template>
    <div class="boxs">
        <el-card>
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="type">
                    <el-select v-model="queryParams.type" @change="handleQuery">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="source">
                    <el-select v-model="queryParams.source" @change="handleQuery">
                        <el-option v-for="item in sourceList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="code">
                    <el-select v-model="queryParams.code" @change="handleQuery">
                        <el-option v-for="item in codeList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="language">
                    <el-select v-model="queryParams.language" @change="handleQuery">
                        <el-option v-for="item in languageList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="country">
                    <el-select v-model="queryParams.country" @change="handleQuery">
                        <el-option v-for="item in countryList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="EnvType">
                    <el-select v-model="queryParams.pk" @change="handleQuery">
                        <el-option v-for="item in environmentList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="dateRange">
                    <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        start-placeholder="start" end-placeholder="end" @change="timeChange" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">search</el-button>
                    <el-button icon="el-icon-refresh" size="small" @click="resetQuery">reset</el-button>
                </el-form-item>
            </el-form>
            <div class="flex_between">
                <div></div>
                <el-button size="mini" type="danger"
                    @click="handleBatchDelete()">{{ $t('table.BatchDeletion') }}</el-button>

            </div>
            <el-table border :data="moreArr" style="margin-top: 15px" v-loading="loading">
                <el-table-column prop="type" label="type" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == '1'">食物</div>
                        <div v-else-if="scope.row.type == '2'">运动</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="name" align="center" min-width="120" />
                <el-table-column label="url" align="center" prop="url" width="200">
                    <template slot-scope="scope">
                        <div>
                            <img :src="scope.row.url" alt="Image"
                                style="max-width: 100px; max-height: 100px; cursor: pointer;"
                                @click="openDialog(scope.row.url)" />
                        </div>

                    </template>
                </el-table-column>
                <el-table-column prop="code" label="code" align="center" min-width="120" />
                <el-table-column prop="source" label="source" align="center" min-width="120" />
                <el-table-column prop="country" label="country" align="center" min-width="120" />
                <el-table-column prop="language" label="language" align="center" min-width="100"
                    show-overflow-tooltip />

                <el-table-column prop="created_at" label="created_at" align="center" width="180"
                    show-overflow-tooltip />
                <el-table-column label="operate" align="center" width="110">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">delete</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getMore" />
            <el-dialog :visible.sync="dialogVisible" @close="dialogVisible = false">
                <img :src="currentImageUrl" alt="Large Image" style="width: 100%;" />
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import { getUserRecordFailList, deleteHandelRecordFail, batchDeleteHandelRecordFail, getCalorieForm4SourceList, getCalorieForm4LanguageList, getCalorieForm4CountryList, getCalorieForm4CodeList } from "@/api/Calorie"; //请替换成你的实际api文件路径
export default {
    name: "ExerciseApiLogList",
    data() {
        return {
            dialogVisible: false,
            currentImageUrl:'',
            queryParams: {
                page: 1,
                size: 10,
                pk: "food.scanner.calorie.counter.cal.ai",
                country: "",
                language: "",
                code: "",
                dateRange: { start: "", end: "" }
            },
            dateRange: [],
            total: 0,
            loading: false,
            moreArr: [],
            languageList: [
                 
            ],
            countryList: [

            ],
            codeList:[],
            sourceList:[],
            typeList: [
                {
                    id: '1',
                    name: '食物'
                },
                {
                    id: '2',
                    name: '运动'
                },
            ],
            environmentList: [
                {
                    id: 'food.scanner.calorie.counter.cal.ai',
                    name: 'Production'
                },
                {
                    id: 'food.calorie.tracker.counter.cal.ai.debug',
                    name: 'Testing'
                },
            ],
        };
    },
    methods: {
        openDialog(url) {
            this.currentImageUrl = url;
            this.dialogVisible = true;
        },
        async getlanguageList() {
            let data = await getCalorieForm4LanguageList();
            this.languageList=data.data
        },
        async getcodeList() {
            let data = await getCalorieForm4CodeList();
            this.codeList = data.data
        },
        async getcountryList() {
            let data = await getCalorieForm4CountryList();
            this.countryList = data.data
        },
        async getsourceList() {
            let data = await getCalorieForm4SourceList();
            this.sourceList = data.data
        },
        copyOrder1(data1) {
            const input = document.createElement('textarea');
            input.value = data1;
            document.body.appendChild(input);
            input.select();
            try {
                document.execCommand('copy');
                this.$message({
                    message: 'Text copied to clipboard!',
                    type: 'success'
                });
            } catch (err) {
                this.$message({
                    message: 'Failed to copy text.',
                    type: 'error'
                });
            }
            document.body.removeChild(input);
        },
        async getMore() {
            this.loading = true;
            try {
                let data = await getUserRecordFailList(this.queryParams);
                this.moreArr = data.data || [];
                this.total = data.total || 0;
            } catch (e) {
                this.$message.error("failed to fetch logs");
            }
            this.loading = false;
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getMore();
        },
        resetQuery() {
            this.queryParams.pk = "food.scanner.calorie.counter.cal.ai";
            this.queryParams.code = "";
            this.queryParams.source = "";
            this.queryParams.type = "";
            this.queryParams.country = "";
            this.queryParams.language = "";
            this.queryParams.page = 1;
            this.dateRange = [];
            this.queryParams.dateRange.start = null;
            this.queryParams.dateRange.end = null;
            this.getMore();
        },
        timeChange() {
            this.queryParams.dateRange.start = this.dateRange ? this.dateRange[0] : null;
            this.queryParams.dateRange.end = this.dateRange ? this.dateRange[1] : null;
        },
        handleDelete(index, row) {
            this.$confirm('Confirm delete?', 'Warning', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: "error",
            }).then(async () => {
                this.loading = true;
                try {
                    await deleteHandelRecordFail({ id: row.id });
                    this.getMore();
                    this.$message({ message: "success!", type: "success" });
                } catch (error) {
                    this.$message({ message: "Failed to delete!", type: "error" });
                }
                this.loading = false;
            });
        },
        handleBatchDelete() {
            this.$confirm(this.$t('review.deleteText1'), this.$t('review.deleteText2'), {
                confirmButtonText: this.$t('review.confirm'),
                cancelButtonText: this.$t('review.close'),
                type: "error",
            }).then(async () => {
                this.elloading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                try {
                    let arr = this.moreArr.map(item => {
                        return {
                            id: item.id,
                            url: item.url || null
                        };
                    });
                    await batchDeleteHandelRecordFail({ items: arr });

                    this.getMore();
                    this.$message({
                        message: "success!",
                        type: "success",
                    });
                } catch (error) {
                    // 在这里可以添加错误处理逻辑
                    console.error("Error during deletion:", error);
                    this.$message({
                        message: "Failed to delete!",
                        type: "error",
                    });
                } finally {
                    this.addLoading = false;
                    this.elloading.close();

                }


            });
        },
    },
    created() {
        this.getMore();
        this.getlanguageList();
        this.getsourceList();
        this.getcountryList();
        this.getcodeList();
    }
};
</script>

<style scoped>
.boxs {
    padding: 20px;
}
</style>
